<template>
  <div class="cms-article-container">
    <div class="w-full h-6 cms-article-nav">
      <h6>当前位置：</h6>
      <span v-if="categoryId != 0" @click="goBackRootClick">{{ categoryName }}</span>
      <h6 v-if="categoryId != 0"> > </h6>
      <span @click="goBackCurrentClick">{{ currentCategoryName }}</span>
      <!-- <h6> > {{ article.title }}</h6> -->
    </div>
    <h1 class="cms-article-title">
      {{ article.title }}
    </h1>
    <h1 class="cms-article-subtitle">
      <div>
        <!-- 显示文章的作者/起草人名称 -->
        <span v-if="article.author != undefined && article.author != null && article.author != ''"
          >作者： {{ article.author }}</span
        >
        <!-- 显示文章的来源/作者部门名称，如果来源为空显示作者部门名称 -->
        <span
          class="notView"
          v-if="
            displayArticleSource != undefined &&
            displayArticleSource != null &&
            displayArticleSource != ''
          "
          ><a-divider type="vertical" style="border-color: #c6c6c6" />来源/部门：
          {{ displayArticleSource }}</span
        >
        <!-- 显示文章二审信息 -->
        <template v-if="article.reviewuser && article.auditcount == 2">
          <span>
            <a-divider type="vertical" style="border-color: #c6c6c6" />二审：
            {{ article.reviewuser }}
          </span>
          <!-- <span
            ><a-divider type="vertical" style="border-color: #c6c6c6" /> 审核部门：
            {{ article.reviewdept }}
          </span> -->
          <!-- <span
            ><a-divider type="vertical" style="border-color: #c6c6c6" /> 审核时间：
            {{ article.reviewtm }}
          </span> -->
        </template>
        <!-- 显示文章的发布部门名称(审核通过发布的部门名称)，为空时不显示 -->
        <span
          v-if="article.pubdept != undefined && article.pubdept != null && article.pubdept != ''"
          ><a-divider type="vertical" style="border-color: #c6c6c6" />发布：
          {{ article.pubdept }}</span
        >
        <!-- <span v-if="projectCode === 'ky'">
          <span v-if="article.indept != undefined && article.indept != null && article.indept != ''"
            >发布： {{ article.indept }}</span
          >
        </span>
        <span v-else>
          <span v-if="article.indept != undefined && article.indept != null && article.indept != ''"
            >部门： {{ article.indept }}</span
          >
        </span> -->
        <!-- 显示文章的发布（起草）时间和浏览次数 -->
        <span
          ><a-divider type="vertical" style="border-color: #c6c6c6" />发布时间：
          {{ article.intm }}</span
        >
        <span class="notView"
          ><a-divider type="vertical" style="border-color: #c6c6c6" />浏览次数：
          {{ article.count }}</span
        >

        <span class="notView">
          <a-divider type="vertical" style="border-color: #c6c6c6" />
          <span>字号：【</span>
          <span class="size" @click="clickFontSize('sm')">小 </span>
          <span class="size" @click="clickFontSize('md')">中 </span>
          <span class="size" @click="clickFontSize('lg')">大</span>
          <span>】</span>
        </span>
      </div>
    </h1>
    <!-- 文章内容显示--内容类型为html时；开远公司设置字体加粗 -->
    <div
      v-if="article.ctype == 1"
      class="cms-article-content"
      :style="{ fontSize: fontSize }"
      v-html="article.content"
    >
    </div>
    <!-- <Tinymce
      v-if="article.ctype == 1"
      :value="article.content"
      :options="tinymceOptions"
      :toolbar="[]"
      :showImageUpload="false"
    /> -->
    <!-- <FramePage
      v-if="article.ctype == 1"
      :frameHtml="article.content"
      frameSrc="https://doc.vvbin.cn/"
    /> -->
    <div v-else-if="article.ctype == 2" class="vditor-preview">
      <div v-html="showdownConverter.makeHtml(article.content || '')" class="vditor-reset"></div>
    </div>
    <CmsArticleFiles
      v-if="!!article.attachment && article.attachment.length > 0x0"
      :values="article.attachment"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, onBeforeMount, onUnmounted, computed } from 'vue';

  import { useGlobSetting } from '/@/hooks/setting';

  import { Tinymce } from '/@/components/Tinymce/index';
  // import FramePage from '/@/views/sys/iframe/index.vue';

  import showdown from 'showdown';
  import 'vditor/dist/index.css';

  import CmsArticleFiles from './CmsArticleFiles.vue';

  import { useRouter } from 'vue-router';
  import { useCmsStore } from '/@/store/modules/cms';

  import { ArticleDto } from '/@/api/cms/model/articleModel';

  import { getCategory } from '/@/api/cms/category';
  import { viewArticle } from '/@/api/cms/article';
  import {
    getImageFileApi,
    getFileApi,
    uploadImageFileViewUrlPrefix,
    uploadVideoFileViewUrlPrefix,
  } from '/@/api/platform/file';
  import { replaceAll } from '/@/utils/QcUnifyUtil';

  import { useGo } from '/@/hooks/web/usePage';

  export default defineComponent({
    name: 'CmsArticleView',
    components: { CmsArticleFiles, Tinymce },
    setup() {
      const router = useRouter();
      const cmsStore = useCmsStore();
      const showdownConverter = new showdown.Converter();
      showdownConverter.setOption('tables', true);
      const go = useGo();
      const { uploadUrl, globalProjectCode } = useGlobSetting();
      const projectCode = ref<String>(globalProjectCode);

      //动态字号样式
      let fontSize = ref('large');

      const tinymceOptions = ref({
        readonly: true,
        menubar: false,
      });

      const articleId = ref<string | number>();
      const article = ref<ArticleDto>({});

      const currentCid = ref(0); //当前栏目id
      const currentCategoryName = ref(''); //当前栏目名称
      const categoryId = ref(0); //一级栏目id
      const categoryName = ref(''); //一级栏目名称

      //获取文章详情信息
      function getArticleDetail() {
        viewArticle({ id: articleId.value }).then((res) => {
          console.log('viewArticle res', res);
          article.value = res;
          //将文章内容中的图片和视频url前缀进行替换还原
          let articleContent = res.content;
          if (
            articleContent != undefined &&
            articleContent != null &&
            articleContent.length > 0x0
          ) {
            articleContent = replaceAll(
              articleContent,
              uploadImageFileViewUrlPrefix + getImageFileApi,
              uploadUrl + getImageFileApi,
            );
            articleContent = replaceAll(
              articleContent,
              uploadVideoFileViewUrlPrefix + getFileApi,
              uploadUrl + getFileApi,
            );
          }
          article.value.content = articleContent;

          //获取文章所在栏目信息
          getCategory(article.value.cid).then((res) => {
            console.log('当前栏目', res);
            if (res != null) {
              currentCid.value = res.id;
              categoryId.value = res.pid;
              currentCategoryName.value = res.name;
            }
            if (res.pid != 0) {
              getCategory(categoryId.value).then((res) => {
                console.log('一级栏目', res);
                if (res != null) {
                  categoryName.value = res.name;
                }
              });
            }
          });
        });
      }

      //显示文章的来源/作者部门名称，如果与审核通过发布的部门名称相同返回null不进行显示（已经有发布部门信息显示）
      let displayArticleSource = computed(() => {
        if (article.value != undefined && article.value != null) {
          let publishDeptValue = article.value.pubdept;
          let sourceValue = article.value.source;
          if (!sourceValue) {
            //文章来源信息为空，返回作者部门名称
            let indeptValue = article.value.indept;
            if (!indeptValue) {
              //没有作者部门名称，返回null
              return null;
            } else {
              //如果作者部门名称与审核通过发布部门名称相同返回null，不重复显示
              if (indeptValue === publishDeptValue) return null;
              else return indeptValue;
            }
          } else {
            //文章来源信息有值，返回文章来源信息
            //如果文章来源信息与审核通过发布部门名称相同返回null，不重复显示
            if (sourceValue === publishDeptValue) return null;
            else return sourceValue;
          }
        }
        return null;
      });

      onBeforeMount(() => {
        console.log('CmsArticleView onBeforeMount');
        //获取文章ID，先从url传参中获取，如果没有再从store中获取；可以直接输入url地址打开网页，所以先从url中获取
        //测试--获取路由地址传参 url中的参数使用params获取
        // console.log('CmsArticleView onBeforeMount router', router.currentRoute.value.params);
        if (router.currentRoute.value.params.id) {
          articleId.value = router.currentRoute.value.params.id;
        }
        if (articleId.value == undefined || articleId.value == null) {
          console.log('CmsArticleView getCmsRouteParam from store', cmsStore.getCmsRouteParam);
          const cmsRouteParam = cmsStore.getCmsRouteParam;
          if (cmsRouteParam != undefined && cmsRouteParam != null) {
            articleId.value = cmsStore.getCmsRouteParam.id;
          }
        }

        //从后台接口获取文章的数据
        getArticleDetail();
      });
      onUnmounted(() => {
        console.log('CmsArticleView onUnmounted');
      });

      //点击一级栏目
      function goBackRootClick() {
        console.log('categoryId', categoryId.value);
        console.log('categoryName', categoryName.value);
        go('/cms/category/' + categoryId.value);
      }

      //点击二级栏目
      function goBackCurrentClick() {
        console.log('currentCid', currentCid.value);
        console.log('currentCategoryName', currentCategoryName.value);
        go('/cms/category/' + currentCid.value);
      }

      //点击字号切换内容字号
      function clickFontSize(flag) {
        if (flag === 'lg') fontSize.value = 'x-large';
        if (flag === 'md') fontSize.value = 'large';
        if (flag === 'sm') fontSize.value = 'small';
      }

      return {
        articleId,
        article,
        showdownConverter,
        tinymceOptions,
        getArticleDetail,
        goBackRootClick,
        goBackCurrentClick,
        currentCid,
        currentCategoryName,
        categoryId,
        categoryName,
        clickFontSize,
        fontSize,
        projectCode,
        displayArticleSource,
      };
    },
  });
</script>
<style scoped lang="less">
  @import './cms.less';

  //字号文字部分样式设置
  .size {
    cursor: pointer;
  }

  .size:hover {
    color: #0960bd;
    text-decoration: underline;
  }

  @media screen and (max-width: 768px) {
    .notView {
      display: none;
    }
  }
</style>
